<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<div id="app">
			<h1>{{msg}}</h1>
			<!-- ref是Vue定义的使用方法 作用类似于class类名 可在JS-Vue对象中使用$refs.xxx 定位 -->
			<input type="text" id="" :value="msg" ref="addtext" />
			<button @click="fun01" >ref效果</button>
		</div>
		
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data(){
					return{
						msg:"hello!",
						defaultText:"请输入",
					}
				},
				methods:{
					fun01(){
						console.log(this.$refs);
						
						// 控制台打印ref="addtext"元素的value
						console.log(this.$refs.addtext.value);

						// data中的msg赋值为ref="addtext"元素的value
						this.msg = this.$refs.addtext.value;

						// 是ref="addtext"元素的value值为空，既文本输入框为空
						this.$refs.addtext.value="";
					}
				},
				computed:{},
				watch:{}
			})
		</script>
	</body>
</html>
